<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
    <div id="app">

        <!-- 顶部导航 -->
        <nav class="nav-container">
            <div class="w">
                <p class="nav-postion">
                    <img src="./images/location_fill.png" alt="">
                    <span>河南</span>
                </p>

                <ul>
                    <li>你好，请登录  免费注册  </li>
                    <li>我的订单</li>
                    <li>我的京东 <i class="nav-icon"></i> </li>
                    <li>企业采购 <i class="nav-icon"></i> </li>
                    <li>商家服务 <i class="nav-icon"></i> </li>
                    <li>网站导航 <i class="nav-icon"></i> </li>
                    <li>手机京东</li>
                    <li>网站无障碍</li>
                </ul>
            </div>
        </nav>


        <!-- header -->
        <header>
           <div class="w flex">
                <div class="header-left">
                    <img src="./images/logo.jpg" alt="">
                </div>
                <div class="header-center">

                    <div class="relative">
                        <div class="header-search flex">
                            <input type="text">
                            <img src="./images/camera.png"  class="header-search-icon__camera" alt="">
                            <button> <img src="./images/search.png" class="header-search-icon__search" alt=""></button>
                        </div>
                        <button class="header-cart">
                            <img src="./images/cart.png" alt="">
                            我的购物车
                            <span class="cart-num">0</span>
                        </button>
                    </div>

                    <div>
                        <ul class="search-hot">
                            <li>奇遇沉浸式</li>
                            <li>京造618</li>
                            <li>极光Pro</li>
                            <li>京东服饰</li>
                            <li>童装618</li>
                            <li>家装百科</li>
                            <li> 港荣蛋糕</li>
                            <li>健康好物</li>
                            <li>粮油618</li>
                        </ul>
                               
                    </div>

                    <div>
                        <ul class="header-nav">
                            <li>京东超市</li>
                            <li>京东家电</li>
                            <li>秒杀</li>
                            <li>拍卖</li>
                            <li>京东生鲜</li>
                            <li>PLUS会员</li>
                            <li>电脑数码</li>
                            <li>健康好物</li>
                            <li>进口好物</li>
                            <li>便宜包邮</li>
                            <li>京东五金城</li>
                        </ul>
                    </div>



                </div>
                <div class="header-right">
                    <img src="./images/20.png.webp" alt="">
                </div>
           </div>
        </header>


        <!-- banner -->
        <div class="bg-cover">
            <div class="banner w">
                <div class="banner-nav">
                    <ul>
                        <li>手机 / 运营商 / 数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>艺术 / 鲜花 / 农牧园艺</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>支付/白条/保险/企业金融</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                        <li>手机/运营商/数码</li>
                    </ul>
                </div>
                <div class="banner-swipe">
                    <!-- 轮播图 -->
                    <img src="./images/s1.png.webp" alt="" srcset="">
                </div>
                <div class="banner-recommend">
                    <img src="./images/0511d308bf682c44.png.webp" alt="">
                    <img src="./images/860e4cbdc3f4eee1.png.webp" alt="">
                    <img src="./images/b0d5c950be585c71.jpg.webp" alt="">
                </div>
                <div class="banner-right"></div>
            </div>

            <div class="ms w flex">
                <div class="ms-block">
                    <h1>京东秒杀</h1>
                    <p> <span>{{msStart}}</span> 点场距结束 </p>
                    <div class="ms-clock">
                        <div class="ms-h">{{msEndH}}</div>
                        <div class="ms-m">{{msEndM}}</div>
                        <div class="ms-s">{{msEndS}}</div>
                    </div>
                </div>
                <div class="ms-item">1</div>
                <div class="ms-item">2</div>
                <div class="ms-item">3</div>
                <div class="ms-item">4</div>
                <div class="ms-item">5</div>
            </div>
        </div>


        <!-- 限量好物 -->
        <div class="xlhw">
            限量好物    限量好物  限量好物  限量好物
        </div>


        <!-- 频道广场 -->
        <h1 class="section-title">频道广场</h1>
        <section class="w">
                <div>
                    <div>
                        <div>1</div>
                        <div>2</div>
                    </div>
                    <div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                    </div>
                </div>
                <div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>10</div>
                </div>
        </section>

    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/app.js"></script>
</body>
</html>